<template>
  <el-form size="small" label-width="140px" :model="query" ref="form">
    <el-card shadow="hover" v-for="(item, index) in query.list" :key="index" class="dessign">
      <div class="button">
        <el-button @click="handleAdd(item)" type="warning" icon="el-icon-document-copy" circle></el-button>
        <el-button
          v-show="index !== 0"
          @click="handleDelete(index)"
          type="danger"
          icon="el-icon-delete"
          circle
        ></el-button>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="种植节点"
            :prop="`list[${index}].plantNode`"
            :rules="{ required: true, message: '请选择种植节点', trigger: 'blur' }"
          >
            <el-select v-model="item.plantNode" placeholder="请选择种植节点" clearable style="width: 100%">
              <el-option
                v-for="item in dict.type.plant_node"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="建议农资品"
            :prop="`list[${index}].product`"
            :rules="{ required: true, message: '请输入建议农资品', trigger: 'blur' }"
          >
            <el-input v-model="item.product" placeholder="请输入建议农资品" clearable />
          </el-form-item>
          <el-form-item
            label="说明"
            :prop="`list[${index}].illustration`"
            :rules="{ required: true, message: '请输入说明', trigger: 'blur' }"
          >
            <el-input v-model="item.illustration" placeholder="请输入说明" type="textarea" :rows="2" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="建议阶段起止时间"
            :prop="`list[${index}].time`"
            :rules="{ required: true, message: '建议阶段起止时间', trigger: 'blur' }"
          >
            <el-date-picker
              v-model="item.time"
              type="daterange"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="建议使用量（亩）"
            :prop="`list[${index}].consumption`"
            :rules="{ required: true, message: '请输入建议使用量（亩）', trigger: 'blur' }"
          >
            <el-input v-model="item.consumption" placeholder="请输入建议使用量（亩）" clearable />
          </el-form-item>
          <el-form-item
            label="是否需上报"
            :prop="`list[${index}].report`"
            :rules="{ required: true, message: '请选择是否需上报', trigger: 'blur' }"
          >
            <el-select v-model="item.report" placeholder="请选择是否需上报" clearable style="width: 100%">
              <el-option
                v-for="item in dict.type.report_state"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
export default {
  dicts: ['plant_node', 'report_state'],
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          const list = JSON.parse(JSON.stringify(newVal))
          list.forEach((e) => {
            e.time = [e.startTime, e.endTime]
          })
          this.query.list = list
        } else this.query.list = [{}]
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      query: {
        list: [{}]
      }
    }
  },
  methods: {
    handleDelete(index) {
      this.query.list.splice(index, 1)
    },
    handleAdd(item) {
      const value = JSON.parse(JSON.stringify(item))
      delete value.detailId
      this.query.list.push(value)
    },
    handleVerify() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.query.list.forEach((e) => {
            e.startTime = e.time[0]
            e.endTime = e.time[1]
          })
          return this.$emit('verify', this.query.list)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dessign {
  margin-bottom: 10px;
  position: relative;
  ::v-deep .el-card__body {
    padding: 15px 20px 0 20px;
  }
  ::v-deep .el-card__header {
    border-bottom: none !important;
  }
  .button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 999;
  }
}
</style>
